<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>票务管理 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .ticket-header {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 20px 20px;
            position: relative;
            overflow: hidden;
        }
        
        .ticket-header::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .ticket-header::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .page-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: "›";
            color: rgba(255, 255, 255, 0.7);
        }
        
        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .breadcrumb-item a {
            color: white;
        }
        
        .ticket-table {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .ticket-row {
            transition: all 0.3s ease;
        }
        
        .ticket-row:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            background-color: #f8f9ff;
            z-index: 1;
            position: relative;
        }
        
        .route-info {
            display: flex;
            align-items: center;
        }
        
        .route-info i {
            color: #3949ab;
            margin: 0 8px;
        }
        
        .badge-pill {
            padding: 0.5em 0.8em;
            font-weight: 500;
        }
        
        .empty-state {
            padding: 3rem;
            text-align: center;
        }
        
        .btn-group-responsive {
            white-space: nowrap;
        }
        
        @media (max-width: 767.98px) {
            .page-title {
                font-size: 2rem;
            }
            
            .btn-responsive-block {
                display: block;
                width: 100%;
                margin-bottom: 0.5rem;
            }
            
            .table-responsive {
                border-radius: 10px;
                overflow: hidden;
            }
            
            .btn-group-responsive {
                display: flex;
            }
            
            .btn-group-responsive .btn {
                flex: 1;
                padding: 0.25rem;
                font-size: 0.875rem;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane-departure mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 d-none d-lg-flex">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="快速搜索" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="ticket-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="page-title animate__animated animate__fadeInUp">票务管理</h1>
                    <nav aria-label="breadcrumb" class="animate__animated animate__fadeInUp animate__delay-1s">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/flightbooking/"><i class="fas fa-home"></i> 首页</a></li>
                            <li class="breadcrumb-item active" aria-current="page">票务管理</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 text-right">
                    <a href="/flightbooking/flights" class="btn btn-light btn-lg animate__animated animate__fadeInUp animate__delay-1s">
                        <i class="fas fa-plus-circle mr-2"></i>购买新机票
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <div class="card animate__animated animate__fadeInUp">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-list-alt mr-2"></i>订票记录</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive ticket-table">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>票号</th>
                                <th>航班号</th>
                                <th>航空公司</th>
                                <th>行程</th>
                                <th>旅客</th>
                                <th>座位号</th>
                                <th>购票时间</th>
                                <th>实付金额</th>
                                <th>票状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="ticket : ${tickets}" class="ticket-row">
                                <td>
                                    <span class="badge badge-light">#<span th:text="${ticket.ticketId}">1</span></span>
                                </td>
                                <td>
                                    <i class="fas fa-plane-departure text-primary mr-1"></i>
                                    <span th:text="${ticket.flightId}">CA1234</span>
                                </td>
                                <td th:text="${ticket.flight != null ? ticket.flight.airlineCompany : '未知'}">中国国际航空</td>
                                <td>
                                    <div class="route-info">
                                        <span th:text="${ticket.flight != null ? ticket.flight.departureCity : '未知'}">北京</span>
                                        <i class="fas fa-long-arrow-alt-right"></i>
                                        <span th:text="${ticket.flight != null ? ticket.flight.arrivalCity : '未知'}">上海</span>
                                    </div>
                                </td>
                                <td>
                                    <i class="fas fa-user-circle text-success mr-1"></i>
                                    <span th:text="${ticket.passenger != null ? ticket.passenger.name : '未知'}">张三</span>
                                </td>
                                <td>
                                    <i class="fas fa-chair text-info mr-1"></i>
                                    <span th:text="${ticket.seatNumber}">12A</span>
                                </td>
                                <td>
                                    <i class="far fa-calendar-alt text-warning mr-1"></i>
                                    <span th:text="${#dates.format(ticket.purchaseDate, 'yyyy-MM-dd HH:mm')}">2023-07-01 08:00</span>
                                </td>
                                <td>
                                    <span class="badge badge-light">¥<span th:text="${ticket.actualPrice}">1200.00</span></span>
                                </td>
                                <td>
                                    <span th:if="${ticket.status == '已预订'}" class="badge badge-pill badge-warning">
                                        <i class="fas fa-clock mr-1"></i> 已预订
                                    </span>
                                    <span th:if="${ticket.status == '已出票'}" class="badge badge-pill badge-success">
                                        <i class="fas fa-check-circle mr-1"></i> 已出票
                                    </span>
                                    <span th:if="${ticket.status == '已取消'}" class="badge badge-pill badge-danger">
                                        <i class="fas fa-times-circle mr-1"></i> 已取消
                                    </span>
                                    <span th:if="${ticket.status == '已退票'}" class="badge badge-pill badge-secondary">
                                        <i class="fas fa-undo mr-1"></i> 已退票
                                    </span>
                                    <span th:if="${ticket.status == '已使用'}" class="badge badge-pill badge-info">
                                        <i class="fas fa-check-double mr-1"></i> 已使用
                                    </span>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm btn-group-responsive">
                                        <a th:href="@{/tickets/{id}(id=${ticket.ticketId})}" class="btn btn-info">
                                            <i class="fas fa-eye mr-1"></i> 详情
                                        </a>
                                        <a th:if="${ticket.status == '已预订'}" th:href="@{/tickets/cancel/{id}(id=${ticket.ticketId})}" 
                                           class="btn btn-danger" onclick="return confirm('确定要取消此票吗？')">
                                            <i class="fas fa-ban mr-1"></i> 取消
                                        </a>
                                        <a th:if="${ticket.status == '已出票'}" th:href="@{/tickets/print/{id}(id=${ticket.ticketId})}" 
                                           class="btn btn-primary">
                                            <i class="fas fa-print mr-1"></i> 打印
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(tickets)}">
                                <td colspan="10" class="empty-state">
                                    <i class="fas fa-ticket-alt fa-4x text-muted mb-3 d-block"></i>
                                    <h4 class="text-muted">暂无购票记录</h4>
                                    <p class="mb-3">您还没有任何机票预订记录，请先购买机票</p>
                                    <a href="/flightbooking/flights" class="btn btn-primary mt-2">
                                        <i class="fas fa-search mr-1"></i> 浏览航班
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center text-md-left mb-3 mb-md-0">
                    <h5><i class="fas fa-plane mr-2"></i>航空订票系统</h5>
                    <p class="mb-0">提供便捷、高效的航班预订服务</p>
                </div>
                <div class="col-md-4 text-center mb-3 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/flightbooking/flights" class="text-light"><i class="fas fa-angle-right mr-2"></i>航班查询</a></li>
                        <li><a href="/flightbooking/passengers" class="text-light"><i class="fas fa-angle-right mr-2"></i>旅客管理</a></li>
                        <li><a href="/flightbooking/tickets" class="text-light"><i class="fas fa-angle-right mr-2"></i>机票预订</a></li>
                    </ul>
                </div>
                <div class="col-md-4 text-center text-md-right">
                    <h5>联系我们</h5>
                    <p class="mb-0">客服热线: 400-123-4567</p>
                    <div class="mt-3">
                        <a href="#" class="text-light mr-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light mr-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fas fa-envelope fa-lg"></i></a>
                    </div>
                    <p class="mt-3 mb-0">© 2023 航空订票系统 - JZA04</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html> 